<template>
  <div class="tool-complex">
    <eharts-option :config="config" :option="option"></eharts-option>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-echart-radar",
  mixins: [mixins],
  computed: {
    option() {
      const _this = this;
      const gridData = this.tableData;
      let series = [];
      return {
        title: {
          show: this.attr.titleShow,
          text: this.attr.title,
          textStyle: {
            color: this.attr.fontColor,
            fontWeight: this.attr.fontWeight,
            fontSize: this.attr.fontSize,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          data: ["成绩单"],
          show: this.attr.legendShow,
          textStyle: {
            color: this.attr.legendColor,
            fontWeight: 800,
            fontSize: this.attr.legendSize,
          },
          formatter: function (name) {
            return name;
          },
          padding: [16, 16],
          left: "right",
          top: "auto",
          orient: this.attr.orient, // 'horizontal'、'vertical'
          icon: "roundRect", // 'circle'、'rect'、'roundRect'
          itemHeight: 16,
        },
        radar: {
          center: ["50%", "54%"],
          splitNumber: 5, // 雷达图圈数设置
          axisName: {
            show: true, // 显示指示器名称
            color: this.attr.axisColor,
            fontSize: this.attr.axisSize,
            padding: [3, 5],
          },
          axisLabel: {
            textBorderColor: "none",
            // fontSize: this.attr.labelSize,
            // color: this.attr.labelColor,
          },
          // 设置雷达图中间射线的颜色
          axisLine: {
            lineStyle: {
              color: "#C3C3C491",
            },
          },
          //雷达图背景网格的颜色
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#C3C3C491", // 设置网格的颜色
            },
          },
          indicator: [
            { text: "语文", max: 150 },
            { text: "数学", max: 150 },
            { text: "英语", max: 150 },
            { text: "物理", max: 120 },
            { text: "化学", max: 120 },
          ],
        },
        textStyle: {
          color: this.attr.labelColor,
          fontSize: this.attr.labelSize,
        },
        series: [
          {
            name: "成绩单",
            type: "radar",
            data: [
              {
                value: [100, 93, 123, 90, 70],
                //symbolSize: 2,
                symbolColor: this.attr.lineStyle,
                //symbol: "none", //去掉折线上的小圆点
                lineStyle: {
                  color: this.attr.showBackground
                    ? this.attr.lineStyle
                    : this.$methods.gradientReturnString(
                        "echart",
                        _this.attr.linearGradient
                      ),
                },
                label: {
                  show: this.attr.labelShow,
                  formatter: function (params) {
                    return `${params.value}`;
                  },
                },
                areaStyle: {
                  opacity: this.attr.showBackground ? 1 : 0,
                  color: _this.$methods.gradientReturnString(
                    "echart",
                    _this.attr.linearGradient
                  ),
                  shadowBlur: this.attr.shadowBlur,
                },
              },
            ],
          },
        ],
      };
    },
  },
  data() {
    return {
      tableData: {
        xData: [
          { name: "西峡", max: 300 },
          { name: "周口", max: 300 },
          { name: "南阳", max: 300 },
          { name: "驻马店", max: 300 },
          { name: "郑州", max: 300 },
        ],
        yData: ["系列"],
        valueData: [[256, 256, 256, 256, 256, 256]],
      },
      attr: null,
    };
  },
  pageData: {
    version: "0.0.2",
    name: "tool-echart-radar",
    title: "雷达图",
    count: 0,
    width: 540,
    height: 360,
    config: {
      label: "雷达图",
      type: "table",
      url: "",
      data: {
        key: "tableData",
        value: {
          xData: [
            { name: "西峡", max: 300 },
            { name: "周口", max: 300 },
            { name: "南阳", max: 300 },
            { name: "驻马店", max: 300 },
            { name: "郑州", max: 300 },
          ],
          yData: ["系列"],
          valueData: [[256, 256, 256, 256, 256, 256]],
        },
      },
      axios: {
        type: "get",
      },
      params: {},
      attr: [
        {
          key: "linearGradient",
          title: "",
          hidden: false,
          formType: "color-linear-gradient",
          group: "linear-gradient",
          type: "Object",
          data: {
            type: "linear-gradient",
            angle: 45,
            colors: ["#409eff", "#0967F2"],
          },
        },
        {
          key: "labelShow",
          title: "显示数值",
          formType: "radio-select",
          group: "basics",
          type: "Boolean",
          data: false,
        },
        {
          key: "labelColor",
          title: "数值颜色",
          formType: "color-picker",
          group: "basics",
          type: "Boolean",
          data: "#000",
        },
        {
          key: "labelSize",
          title: "数值大小",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 16,
        },
        {
          key: "titleShow",
          title: "显示标题",
          formType: "radio-select",
          group: "title",
          type: "Boolean",
          data: false,
        },
        {
          key: "title",
          title: "自定义标题",
          formType: "text-string",
          group: "title",
          type: "String",
          data: "雷达图",
        },
        {
          key: "fontColor",
          title: "标题颜色",
          formType: "color-picker",
          group: "title",
          type: "String",
          data: "#000",
        },
        {
          key: "fontWeight",
          title: "标题粗细",
          formType: "text-number",
          group: "title",
          type: "String",
          data: 800,
        },
        {
          key: "fontSize",
          title: "标题大小",
          formType: "text-number",
          group: "title",
          type: "String",
          data: 16,
        },
        {
          key: "legendShow",
          title: "显示图例",
          formType: "radio-select",
          group: "legend",
          type: "Boolean",
          data: false,
        },
        {
          key: "orient",
          title: "图例布局",
          formType: "select-option", // text-string
          group: "legend",
          type: "String",
          data: "horizontal",
          default: [
            {
              label: "水平",
              value: "horizontal",
            },
            {
              label: "垂直",
              value: "vertical",
            },
          ],
        },
        {
          key: "legendSize",
          title: "文字大小",
          formType: "text-number",
          group: "legend",
          type: "String",
          data: 12,
        },
        {
          key: "legendColor",
          title: "文字颜色",
          formType: "color-picker",
          group: "legend",
          type: "String",
          data: "#000",
        },
        {
          key: "axisColor",
          title: "文字颜色",
          formType: "color-picker",
          group: "axis",
          type: "String",
          data: "#000",
        },
        {
          key: "axisSize",
          title: "文字大小",
          formType: "text-number",
          group: "axis",
          type: "String",
          data: 16,
        },
        {
          key: "lineStyle",
          title: "线段颜色",
          formType: "color-picker",
          group: "axis",
          type: "String",
          data: "#409eff",
        },
        {
          key: "showBackground",
          title: "显示背景",
          formType: "radio-select",
          group: "axis",
          type: "Boolean",
          data: false,
        },
        {
          key: "shadowBlur",
          title: "模糊大小",
          formType: "text-number",
          group: "axis",
          type: "Number",
          data: 0,
        },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-complex {
  width: 100%;
  height: 100%;
}
</style>
